import React, { useState, useEffect, useReducer } from 'react'
const reducer = (state, action) => {
    switch (action.type) {
        case 'rotateX':
            return { ...state, rotateX: action.payload }
        case 'rotateY':
            return { ...state, rotateY: action.payload }
        case 'rotateZ':
            return { ...state, rotateZ: action.payload }
        default:
            return state
    }
}

export default function CtrlBoard({ }) {
    const [{ rotateX, rotateY, rotateZ }, dispatch] = useReducer(reducer, {
        rotateX: 10,
        rotateY: 0,
        rotateZ: 0,
    })
    return [{ rotateX, rotateY, rotateZ }, dispatch, <div className={'m-ctrlBar'}>
        X轴<input type="range" min='-180' max='180' value={rotateX} onChange={e => dispatch({ type: 'rotateX', payload: e.target.value })} /><br />
            Y轴<input type="range" min='-180' max='180' value={rotateY} onChange={e => dispatch({ type: 'rotateY', payload: e.target.value })} /><br />
            Z轴<input type="range" min='-180' max='180' value={rotateZ} onChange={e => dispatch({ type: 'rotateZ', payload: e.target.value })} /><br />
    </div>]


}

